<template>
  <div style="width: 50vw">
    <q-dialog ref="dialogRef" @hide="onDialogHide" class="tw-w-full" style="width: 50vw">
      <q-card class="tw-w-full">
        <q-card-section class="q-dialog-plugin tw-w-full">
          <div v-if="props.teacher" class="tw-space-y-3">
            <div class="tw-grid tw-grid-cols-2 tw-gap-4">
              <div>
                姓名:
                <q-input outlined v-model="teacher.tname"/>
              </div>
              <div>
                年龄:
                <q-input outlined v-model="teacher.age"/>
              </div>
            </div>
            <div class="tw-grid tw-grid-cols-2 tw-gap-4">
              <div>
                职称
                <q-input outlined v-model="teacher.ttile"/>
              </div>
              <div>
                办公室
                <q-input outlined v-model="teacher.location"/>
              </div>
            </div>
            <div class="tw-grid tw-grid-cols-2 tw-gap-4">
              <div>
                院系:
                <q-input outlined v-model="teacher.dept"/>
              </div>
              <div>
                课题数
                <q-input outlined v-model="teacher.project_num" type="number"/>
              </div>
            </div>
            <div>
              邮箱:
              <q-input outlined v-model="teacher.email"/>
            </div>
            <div class="tw-grid tw-grid-cols-2 tw-gap-4">
              <div>
                qq:
                <q-input outlined v-model="teacher.qq"/>
              </div>
              <div>
                电话:
                <q-input outlined v-model="teacher.tel"/>
              </div>
            </div>
            <div>
              修改密码:
              <q-input outlined v-model="teacher.password" type="password"/>
            </div>
          </div>
          <q-card-actions align="right">
            <q-btn color="primary" label="确认" @click="confirm()"/>
            <q-btn color="primary" label="取消" @click="onDialogCancel"/>
          </q-card-actions>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup>
import {ref, defineProps} from "vue";
import {useDialogPluginComponent, useQuasar} from 'quasar'
import {api} from "boot/axios";

const $q = useQuasar()
defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
])
const {dialogRef, onDialogHide, onDialogOK, onDialogCancel} = useDialogPluginComponent()
let props = defineProps({
  teacher: {
    type: Object,
    required: true
  }
})
let teacher = ref(props.teacher)

function confirm() {
  let formData = new FormData()
  formData.append('tnum', teacher.value.tnum)
  formData.append('tname', teacher.value.tname)
  formData.append('age', teacher.value.age)
  formData.append('ttile', teacher.value.ttile)
  formData.append('location', teacher.value.location)
  formData.append('dept', teacher.value.dept)
  formData.append('project_num', teacher.value.project_num)
  formData.append('email', teacher.value.email)
  formData.append('tel', teacher.value.tel)
  formData.append('password', teacher.value.password)
  formData.append('qq', teacher.value.qq)
  api({
    url: "/job/teacher/update",
    method: "post",
    data: formData
  }).then(res => {
    let data = res.data
    if (data.code === 200) {
      $q.notify({
        message: '修改成功',
        color: 'positive',
        position: 'top',
        timeout: 1000
      })
      onDialogOK()
    } else {
      $q.notify({
        message: '修改失败',
        color: 'negative',
        position: 'top',
        timeout: 1000
      })
    }
  })

  onDialogOK()
}

function onOKClick() {
  // on OK, it is REQUIRED to
  // call onDialogOK (with optional payload)
  let formData = new FormData()

  onDialogOK()

  // or with payload: onDialogOK({ ... })
  // ...and it will also hide the dialog automatically
}


</script>

<style scoped>

</style>
